<template>
  <view class="root">
    <!-- <video
      :src="url"
      :poster="item.posterUrl"
      :controls="false"
      :show-progress="false"
      :show-fullscreen-btn="false"
      :show-play-btn="true"
      :loop="false"
      :show-center-play-btn="true"
    ></video> -->
    <view class="play-icon">
      <image src="@/static/bf.png" mode="widthFix" style="width: 100rpx; height: 100rpx;"></image>
    </view>
    <view class="op" @click="handleClick"></view>
  </view>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default() {
        return ''
      }
    },
    width: {
      type: String,
      default() {
        return '450px'
      }
    },
    height: {
      type: String,
      default() {
        return 'auto'
      }
    }
  },
	data() {
    return {
			videoHeight: 0
		}
	},
  methods: {
    handleClick() {
      this.$emit('play')
    }
  }
}
</script>

<style lang="scss" scoped>
.play-icon {
  background-color: #000;
  width: 630rpx;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.root {
  position: relative;
  width: 750rpx;
  overflow: hidden;
  .op{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #000;
    z-index: 10;
    opacity: 0;
  }
}
.posterImg,
.video,
.box {
  display: flex;
  width: 750rpx;
  //border: solid 1px red;absolute
  position: absolute;
}
.video {
  margin-left: -2000px;
}
.box {
  justify-content: center;
  align-items: center;
}
.playIcon {
  width: 80rpx;
  height: 80rpx;
  opacity: 0.6;
}
</style>
